<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <div>学科管理 > javaEE > 标签管理</div>
        <div style="margin-top:20px">
          <!-- <el-button style="background-color:#f2f2f2;padding:10px;color:#666;border:1px solid #DCDFE6" type="text" @click="dialogVisible = true">新建标签</el-button>
            <el-dialog
              title="新建标签"
              :visible.sync="dialogVisible"
              width="600px"
              style="text-align:left"
            >
              <span>
                *标签名称：
                <el-input v-model="input" placeholder="请输入" style="width:400px"></el-input>
              </span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false;xiuGai()">确 定</el-button>
              </span>
          </el-dialog>-->
          <el-button
            type="info"
            @click="handNew"
            style="background-color:#f2f2f2;color:#606266;border:1px solid #DCDFE6"
          >新建标签</el-button>
          <el-button style="background-color:#f2f2f2" @click="backOjc">返回科学</el-button>
        </div>
        <div style="margin-top:20px">
          <span class="name">标签名称</span>
          <el-input style="width:240px" @keydown.enter.native="search()" v-model="resList.tagName"></el-input>
        </div>
        <el-table :data="dataList" border fit highlight-current-row>
          <el-table-column label="序号">
            <template slot-scope="scope">
              <span>{{scope.row.id}}</span>
            </template>
          </el-table-column>
          <el-table-column label="标签名称">
            <template slot-scope="scope">
              <span>{{scope.row.subjectName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建者">
            <template slot-scope="scope">
              <span>{{scope.row.tagName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建日期">
            <template slot-scope="scope">
              <span>{{scope.row.addDate}}</span>
            </template>
          </el-table-column>
          <el-table-column label="面试题数量">
            <template slot-scope="scope">
              <span>{{scope.row.totals}}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <span>{{scope.row.state}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="280px">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                @click="handChange(scope.row)"
                :disabled="!!scope.row.state"
              >修改</el-button>
              <el-button type="text" size="mini" @click="handStatus(scope.row)">
                <!-- <span v-if="scope.row.state==0">启用</span>
                <span v-else>禁用</span>-->
                {{scope.row.state?'启用':'禁用'}}
              </el-button>
              <el-button
                type="text"
                size="small"
                @click="delMes(scope.row.id)"
                :disabled="!!scope.row.state"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="margin-top:15px"
          background
          layout="prev, pager, next"
          @current-change="changePage"
          :total="total"
          :current-page="resList.page"
          :page-size="resList.pagesize"
        ></el-pagination>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list, update, remove, add, removeState } from '@/api/hmmm/tags'
export default {
  name: 'TagsList',
  data() {
    return {
      dataList: [],
      total: 0,
      resList: {
        id: '',
        tagName: '',
        page: null,
        pagesize: 10,
        subjectName: ''
      },
      dialogVisible: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      const { data: res } = await list(this.resList)
      // res.items.reverse()
      this.dataList = res.items
      this.total = res.counts
    },
    backOjc() {
      // this.$router.back('subjects')
      this.$router.push('list')
    },
    // 分页
    changePage(newPage) {
      this.resList.page = newPage
      this.getList()
    },
    // 删除
    delMes(id) {
      this.$confirm('是否删除')
        .then(() => {
          remove({ id })
            .then(res => {
              this.dataList.splice(id, 1)
              this.$message.success('删除成功')
              this.getList()
            })
            .catch(res => {
              this.$message.error('删除失败')
            })
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    },

    // 新增
    handNew() {
      this.$prompt('请输入标签', '提示', {
        title: '新建标签',
        inputPlaceholder: '请输入',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(({ value }) => {
          const addList = {
            subjectID: 1,
            tagName: value
          }
          add(addList)
          this.getList()
          this.$message({
            type: 'success',
            message: '新建成功 '
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '新建失败'
          })
        })
    },
    // 修改
    handChange(item) {
      this.$prompt('请输入修改名称', {
        title: '修改标签',
        inputPlaceholder: item.tagName,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(async ({ value }) => {
          const updateDate = {
            id: item.id,
            subjectID: item.id,
            tagName: value
          }
          await update(updateDate)
          this.getList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消修改'
          })
        })
    },
    // 状态改变
    handStatus(val) {
      const status = {
        id: val.id,
        state: val.state
      }
      if (status.state) {
        status.state = 0
        val.state = status.state
      } else {
        status.state = 1
        val.state = status.state
      }
      removeState(status)
        .then(result => {
          this.$message({
            type: 'success',
            message: '状态修改成功'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '状态修改失败'
          })
        })
    },
    // // 搜索
    search() {
      this.getList()
    }
  }
}
</script>

<style scoped>
.el-table {
  margin-top: 20px;
}
.name {
  display: inline-block;
  width: 80px;
  height: 30px;
  background-color: #f2f2f2;
  line-height: 30px;
  font-size: 14px;
  text-align: center;
}
</style>
